<template>
  <a-modal
    title="订单生命轨迹"
    :visible="visible"
    :confirm-loading="confirmLoading"
    :footer="null"
    @cancel="close()"
  >
    <div class="modal-good-track">
      <a-steps direction="vertical" progress-dot size="small" :current="0">
        <a-step v-for="(l, i) in items" :key="i" :title="l.time">
          <template slot="description">
            <div>
              <div>{{ l.content }}</div>
              <div>操作人：{{ l.operator }}</div>
            </div>
          </template>
        </a-step>
      </a-steps>
    </div>
  </a-modal>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      confirmLoading: false,
      items: [],
    }
  },
  methods: {
    open({ items }) {
      this.visible = true
      this.items = items.reverse()
    },
    close() {
      this.visible = false
    },
  },
}
</script>

<style lang="scss" scoped>
.modal-good-track {
  max-height: 600px;
  overflow-y: auto;
  :deep(.ant-steps) {
    .ant-steps-item-content {
      width: 300px;
    }
  }
}
</style>
